<!DOCTYPE html>
<html lang="en">
<head>
    <script src="/static/js/dev.js"></script>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <!--bootstrap插件-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <link href="/static/plugin/bootstrap/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="/static/plugin/jo/joUI.css" rel="stylesheet"/>
    <!--字体插件-->
    <link href="/static/plugin/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
    <link href="/static/plugin/layui-2.4.3/css/layui.css" rel="stylesheet"/>
    <!--ztree-->
    <link href="/static/plugin/zTree/css/metroStyle/metroStyle.css" rel="stylesheet"/>
    <!--common-->
    <link href="/static/css/common.css" rel="stylesheet"/>

    <title>统计分析</title>
    <style>

    </style>
</head>
<body class="skin-default">

<div class="container-fluid">
    <div class="row">
        <div class="col-xs-12">
            <div class="card" style="padding: 15px 15px 5px 15px;">
                <form class="form-inline search-bar" id="pageForm">
                    <div class="form-group">
                        <label class="control-label">时间范围：&nbsp;</label>
                        <div class="input-group">
                            <input type="text" name="createTime" id="createTime" class="form-control">
                            <span class="input-group-addon" style="border-width: 1px 0px;">~</span>
                            <input type="text" name="createTime2" id="createTime2" class="form-control">
                        </div>
                    </div>
                    <button type="button" class="btn btn-primary" onclick="statistics()"> <i class="fa fa-pie-chart" aria-hidden="true"></i>&nbsp;统计</button>
                </form>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-xs-6">
            <div class="card">
                <div class="card-title">文件类型统计</div>
                <div class="card-content">
                    <div id="orderPic" style="width: 100%;height: 400px;"></div>
                </div>
            </div>
        </div>
        <div class="col-xs-6">
            <div class="card">
                <div class="card-title">文件类型占比</div>
                <div class="card-content">
                    <div id="pie" class="card" style="width: 100%;height: 400px;"></div>
                </div>
            </div>
        </div>
    </div>

    <!--<div class="row">
        <div class="col-xs-12">

            <div class="container-fluid card">

            </div>

        </div>
    </div>-->
</div>



<!--配置信息-->
<script src="/static/js/config.js"></script>
<!--jquery-->
<script src="/static/plugin/jquery/jquery-3.3.1.js"></script>
<script src="/static/plugin/jquery/jquery.cookie.js"></script>
<!--bootstrap-->
<script src="/static/plugin/bootstrap/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<!--[if lt IE 9]>
<script src="/static/plugin/other/html5shiv.js"></script>
<script src="/static/plugin/other/respond.min.js"></script>
<![endif]-->
<!--layui-->
<script src="/static/plugin/layui-2.4.3/layui.all.js"></script>
<!--ztree-->
<script src="/static/plugin/zTree/js/jquery.ztree.all.js"></script>
<!--common-->
<script src="/static/js/common.js"></script>
<!--jo-->
<script src="/static/plugin/jo/jo.js"></script>
<script src="/static/plugin/jo/jo-adapt.js"></script>
<script src="/static/plugin/jo/jo-page-view.js"></script>
<script src="/static/plugin/jo/jo-page-form.js"></script>
<script src="/static/plugin/jo/jo-listener.js"></script>
<!--统计图-->
<script src="/static/plugin/echarts/echarts.js"></script>
<script type="text/javascript">
    layui.laydate.render({
        elem: '#createTime' //注册日期控件
    });
    layui.laydate.render({
        elem: '#createTime2' //注册日期控件
    });
    $(function () {
        statistics();
    });
    //创建柱状图
    function createBarChart(sEleId,sTitle,sSubTitle,aEg,aYData,aCoreData){
        var option = {
            title: {
                text: sTitle,
                subtext: sSubTitle
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: {
                data: aEg
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'value',
                boundaryGap: [0, 0.01]
            },
            yAxis: {
                type: 'category',
                data: aYData
            },
            series: aCoreData
        };
        var myChart = echarts.init(document.getElementById(sEleId));
        myChart.setOption(option);
        return myChart;
    }
    //创建饼图
    function createPieChart(sEleId,sTitle,sSubTitle,aEg,aCoreData){
        var option = {
            title : {
                text: sTitle,
                subtext: sSubTitle,
                x:'center'
            },
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: aEg
            },
            series : [
                {
                    name: '文件占比',
                    type: 'pie',
                    radius : '55%',
                    center: ['50%', '60%'],
                    data:aCoreData,
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        var myChart = echarts.init(document.getElementById(sEleId));
        myChart.setOption(option);
        return myChart;
    }
    //统计
    function statistics(){
        jo.postAjax("{URL_FS}fs/fileInfo/statisFileNum", jo.form2Json('pageForm'), function(json){
            if(json && json.code == "0"){
                //按数量排序
                jo.sort(json.data, function(a, b){
                    return a.num < b.num;
                });
                var title = "文件数量统计图";//标题
                var subTitle = "按类型统计";//子标题
                var eg = [""];//图例
                var yData = new Array();//纵坐标
                var coreData = [
                    {
                        name: '数量',
                        type: 'bar',
                        data: []
                    }
                ];
                var data = json.data;
                for(var i=0;i<data.length;i++){
                    var item = data[i];
                    yData.push(item.typeRemark);
                    coreData[0].data.push(item.num);
                }
                createBarChart("orderPic",title,subTitle,eg,yData,coreData);
                //饼图
                var eg2 = new Array();
                var coreData2 = new Array();
                for(var i=data.length;i>0;i--){
                    var item = data[i-1];
                    eg2.push(item.typeRemark);
                    coreData2.push({value:item.num,name:item.typeRemark});
                }
                createPieChart("pie","各类型文件占比","",eg2,coreData2);
            }

        }, true);
    }
</script>

</body>
</html>
